<template>
    <div class="create-page">
        <BreadCrumb v-if="hideStep" :list="crumbList"></BreadCrumb>
        <PageHeader v-else :title="title"></PageHeader>
        <div class="step-container" v-if="!hideStep">
            <StepView :active="currentTab" :data="stepLine" @on-click="setStep"/>
        </div>
        <component :is="componentMap[currentTab]" @change-step="setStep" :detail="courseDetail" @back="back"></component>  
    </div>
</template>
<script setup>
import BreadCrumb from '@/components/bread-crumb.vue';
import PageHeader from '@/views/create/part/page-header.vue';
import { ref, reactive, onBeforeMount, onMounted, computed, watch, nextTick } from 'vue';
import StepView from './part/step.vue';
import BaseInfo from './part/base-info.vue';
import Catalogue from './part/catalogue.vue';
import { useRoute } from 'vue-router';
import { queryToJson } from '@/lib/tools.js';
import { jumpHref } from '@/router/jumpHref';
import { useStore } from 'vuex';

const route = useRoute();
const store= useStore();

const hideStep = computed(() => {
    return route.query.type == 1;
})

// 步骤条
const stepLine = reactive([
    {title: '基本信息', step: 1},
    {title: '课程章节', step: 2},
]);

// 面包屑
const crumbList = ref([]);

const componentMap = {
    '1': BaseInfo,
    '2': Catalogue
};

// 当前步骤
const currentTab = ref(1);

const courseDetail = ref({});

function setStep(val){
    currentTab.value = val;
    getDetail();
}

const title = computed(() => {
    return route.name === 'editDesign' ? '编辑课程章节' : '创建课程章节';
})

const currentUser = computed(() => {
    return store.state.currentUser;
})


// 监听个人信息变化
watch(() => store.state.currentUser, async(val) => {
    if(val.userId) {
        await nextTick();
        getDetail();
    }
}, {immediate: true});

function getDetail () {
    let courseId = queryToJson().courseId || route.params.courseId;
    if(!courseId) {
        return;
    }
    G_transmit('courseDetail', {
        queries: {
           id: courseId
        },
        silence: true
    })
    .then((res) => {
        courseDetail.value = res.data || {};
        if(courseDetail.value.creatorId !== currentUser.value.userId) {
            G_dispatchEvent('toErrorPage', { title: '很抱歉，您暂时没有权限对该课程章节进行编辑', code: 500, buttonLabel: '返回', target: getBackUrl()});
        }
    })
    .catch((_err) => {
       const { status } = _err;
       if(status.code === 10000002) {
           G_dispatchEvent('toErrorPage', { title: '该课程章节可能已经被删除', code: 500, buttonLabel: '返回', target: getBackUrl()});
           return;
       }
       G_dispatchEvent('toast', { message: status.desc, type: 'error' });
    })
}

function back () {
    let url = getBackUrl();
    G_go(url);
}

function backMoocList() {
    let query = window.location.search.substring(1);
    return jumpHref.mooc.moocList(query);
}

function getBackUrl () {
    return jumpHref.mooc.moocManage(route.query.moocId, route.query.tabStr);
}

onBeforeMount(() => {
    currentTab.value = route.query.step || 1
})

onMounted(() => {
    let backUrl = getBackUrl();
    let step = queryToJson().step;
    crumbList.value = [
        {
            name: '首页',
            route: jumpHref.home.home(),
        },
        {
            name: '慕课管理',
            route: backMoocList(),
        },
        {
            name: '编辑慕课',
            route: backUrl,
        },
        {
            name: step === 1 ? '编辑' : '编辑课程章节',
            route: {
                name: '',
            }
        }
    ];
    
})



</script>

<style lang="scss" scoped>
.create-page{
    width: 100%;
    height:auto;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
}
.step-container{
    margin-top: 20px;
    background-color: #fff;
    width:100%;
    padding-top: 40px;
    padding-bottom: 40px;
    box-sizing: border-box;
}
.content{
    border-radius: 10px;
}
 
</style>

